<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script>
      /* 
      拦截器

      */
      /* 
        需求:
          1. 向所有请求头中添加一个特别的请求: token=abc  ==> 请求拦截器回调
          2. 所有请求成功的回调, 直接得到response中的data数据 ==> 响应拦截器成功回调
          3. 所有请求出错后, 都提示一下错误信息  ==> 响应拦截器失败的回调
        拦截器的作用:
          1. 在发请求前, 做一些特定工作, 比如: 添加一些通用请求参数
          2. 在请求完成后, 对成功的数据进行统一处理, 对错误进行统一处理
        */

      // 添加一个请求拦截器  在发请求前执行
      axios.interceptors.request.use(function (config) { 
        console.log('请求拦截器', config)
        // 1. 向所有请求头中添加一个特别的请求: token=abc
        config.headers.token = 'abc'

        return config; // 一定要返回config
      });

      // 添加一个响应拦截器
      axios.interceptors.response.use(function (response) {
        console.log('响应拦截器, 成功的回调', response)
        // return response;
        // 2. 所有请求成功的回调, 直接得到response中的data数据
        return response.data
      }, function (error) {
        console.log('响应拦截器, 失败的回调')
        // 3. 所有请求出错后, 都提示一下错误信息
        alert(error.message)

        return Promise.reject(error); // 必须返回一个失败的promise, 具体请求的失败回调调用
      })

      axios('http://api.xiaohigh.com/lol').then(
        response => {
          console.log('具体请求的成功回调')
        },
        error => {
          console.log('具体请求的失败回调')
        }
      )

      // axios('http://api.xiaohigh.com/duanzi2').then(
      //   data => {
      //     console.log('具体请求的成功回调2', data)
      //   },
      //   error => {
      //     console.log('具体请求的失败回调2')
      //   }
      // )

      

    </script>
  </body>
</html>
